<template>
     <fieldset>
        <legend>购物车</legend>
        <ul>
         <li v-for="item in carts" :key=item.id> 
          <b>产品名称：{{item.title}}</b>
          <b>产品数量:{{item.count}}</b>
          <b>产品价格：{{item.price}}</b>
          <button @click="remove(item)">移除购物车</button>
          </li>
           <b>总价：{{total}}</b>
        </ul>
     </fieldset>
</template>
<script>
    import{mapState,mapMutations,mapActions,mapGetters} from "vuex"
    export default{
      computed: {
         ...mapState('cart',['name','carts']),
         ...mapGetters('cart',['total'])
      },
      mounted () {
         this.LOG()
      },
      methods: {
         ...mapMutations('cart',['LOG']),
         ...mapActions("cart",['REMOVE_CART']),
         remove(item){
            this.REMOVE_CART( item )
         }
      }
    }
</script>